﻿<div ng-controller="QualitativePerformanceController as qpCtrl">

    <!--<div ng-if="!esgQualitative.noClaims && !esgQualitative.notFoundMessage">-->
    <div class="left-content">
        <div class="sidebar-table-left no-border">
            <div class="orange-number-bubble border{{ qpCtrl.getControversyIndicatorsLastCategory() }}">
                <span ng-hide="esgQualitative.getEsgControversyIndicatorsLastCategory() == 0">{{ qpCtrl.getControversyIndicatorsLastCategory() }}</span>
            </div>
        </div>
        <div class="sidebar-table-right no-border">
            <div class="title-black-border">Highest Controversy Level</div>
            <ul class="esg-ratings_black">
                <li ng-repeat="ci in qpCtrl.getControversyIndicatorsInLastCategory()">
                    <a class="black-link-bold" href="" ng-if="qpCtrl.isControversyActive && qpCtrl.hasControversyClaim" ng-click="qpCtrl.navigateToControversyIndicator(ci)">
                        {{ ci.name }}
                    </a>
                    <b ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                        {{ ci.name }}
                    </b>
                    <br />
                    <ul ng-repeat="ei in ci.eventIndicators">
                        <li ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                            <a href="" class="black-link" ng-click="qpCtrl.navigateToEventIndicator(ci, ei)">
                                {{ ei.name }}
                            </a>
                        </li>
                        <li ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                            {{ ei.name }}
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="right-content">
        <div class="bubble-container">
            <div class="orange-bubble-border border1">1</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Low
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!qpCtrl.hasControversyIndicatorsInCategory(1)">None</li>
                    <li ng-repeat="ci in qpCtrl.getControversyIndicatorsByCategory(1)">
                        <a href="" class="black-link-bold" ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)" ng-click="qpCtrl.navigateToControversyIndicator(ci)">
                            {{ ci.name }}
                        </a>
                        <b ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                            {{ ci.name }}
                        </b>
                        <br />
                        <ul ng-repeat="ei in ci.eventIndicators">
                            <li ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                                <a href="" class="black-link" ng-click="qpCtrl.navigateToEventIndicator(ci, ei)">
                                    {{ ei.name }}
                                </a>
                            </li>
                            <li ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                                {{ ei.name }}
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border2">2</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Moderate
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!qpCtrl.hasControversyIndicatorsInCategory(2)">None</li>
                    <li ng-repeat="ci in qpCtrl.getControversyIndicatorsByCategory(2)">
                        <a href="" class="black-link-bold" ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)" ng-click="qpCtrl.navigateToControversyIndicator(ci)">
                            {{ ci.name }}
                        </a>
                        <b ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ci.name }}</b>
                        <br />
                        <ul ng-repeat="ei in ci.eventIndicators">
                            <li ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">
                                <a href="" class="black-link" ng-click="qpCtrl.navigateToEventIndicator(ci, ei)">{{ ei.name }}</a>
                            </li>
                            <li ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ei.name }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border3">3</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Significant
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!qpCtrl.hasControversyIndicatorsInCategory(3)">None</li>
                    <li ng-repeat="ci in qpCtrl.getControversyIndicatorsByCategory(3)">
                        <a href="" class="black-link-bold" ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)" ng-click="qpCtrl.navigateToControversyIndicator(ci)">{{ ci.name }}</a>
                        <b ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ci.name }}</b>
                        <br />
                        <ul ng-repeat="ei in ci.eventIndicators">
                            <li ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)"><a href="" class="black-link" ng-click="qpCtrl.navigateToEventIndicator(ci, ei)">{{ ei.name }}</a></li>
                            <li ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ei.name }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border4">4</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    High
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!qpCtrl.hasControversyIndicatorsInCategory(4)">None</li>
                    <li ng-repeat="ci in qpCtrl.getControversyIndicatorsByCategory(4)">
                        <a href="" class="black-link-bold" ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)" ng-click="qpCtrl.navigateToControversyIndicator(ci)">{{ ci.name }}</a>
                        <b ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ci.name }}</b>
                        <br />
                        <ul ng-repeat="ei in ci.eventIndicators">
                            <li ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)"><a href="" class="black-link" ng-click="qpCtrl.navigateToEventIndicator(ci, ei)">{{ ei.name }}</a></li>
                            <li ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ei.name }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="bubble-container">
            <div class="orange-bubble-border border5">5</div>
            <div class="orange-bubble-text">
                <div class="title-black-border">
                    Severe
                </div>
                <ul class="esg-ratings_black">
                    <li ng-if="!qpCtrl.hasControversyIndicatorsInCategory(5)">None</li>
                    <li ng-repeat="ci in qpCtrl.getControversyIndicatorsByCategory(5)">
                        <a href="" class="black-link-bold" ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)" ng-click="qpCtrl.navigateToControversyIndicator(ci)">{{ ci.name }}</a>
                        <b ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ci.name }} </b>
                        <br />
                        <ul ng-repeat="ei in ci.eventIndicators">
                            <li ng-if="(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)"><a href="" class="black-link" ng-click="qpCtrl.navigateToEventIndicator(ci, ei)">{{ ei.name }}</a></li>
                            <li ng-if="!(qpCtrl.isControversyActive && qpCtrl.hasControversyClaim)">{{ ei.name }}</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="clear">&nbsp;</div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="clear">&nbsp;</div>
    <!--</div>-->
    <!--<div class="gray-bg-top" ng-show="qpCtrl.notFoundMessage !==''">
        <span class="title-black-bold">{{qpCtrl.notFoundMessage}}</span>
    </div>

    <div class="gray-bg-top" ng-show="qpCtrl.noClaims">
        <span class="title-black-bold"></span>
    </div>-->


</div>